<template>
  <div>
    <div class="main">
      <div class="same">
        <div class="userImg" @click="$router.push('/')">
          <img src="https://i.loli.net/2021/12/02/WuyTjaGcdX2YEHU.png" alt="" />

          <img
            class="motianlun"
            src="https://i.loli.net/2021/12/02/NwvtVzoF7rRLiMG.png"
            alt=""
          />
        </div>

        <div class="login">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="phone"
              label="手机号"
              placeholder="手机号"
              :rules="[
                {
                  pattern: pattern_phone,
                  required: true,
                  message: '请填写手机号',
                },
              ]"
            />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >登录
                <img
                  src="https://i.loli.net/2021/12/02/3kG1JOXqu49ZfLe.png"
                  alt=""
              /></van-button>
            </div>
          </van-form>
        </div>
        <div class="foorter">
          <img src="https://i.loli.net/2021/12/02/LHp5DTIAGVXEjPv.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      username: "",
      password: "",
      pattern_phone: /^1[3-9]\d{9}$/,
    };
  },
  methods: {
    onSubmit(values) {
      this.$store.dispatch("login", values);
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);

  background-size: 100% 100%;
  opacity: 0.8;
  .foorter {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .userImg {
    width: 100%;
    height: 38vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    img {
      border-radius: 50%;
      height: 30vh;
    }

    .motianlun {
      overflow: hidden;
      position: absolute;

      height: 5vh;
      display: block;
      right: 95px;
      top: 54px;
      z-index: -1;
      transform-origin: center 50%;
      animation: rotation 30s linear infinite;
    }
  }
  .login {
    width: 100%;
    height: 29.4vh;

    .van-cell {
      background: rgba(255, 255, 255, 0.397);
      background: none;
      margin-top: 2vh;
      border-bottom: 1px solid #ccc;
    }

    .van-button {
      position: relative;
      margin-top: 10vh;
      overflow: hidden;
      img {
        right: 0;
        top: 5px;
        height: 6vh;
        position: absolute;
      }
    }
    .van-button--block {
      background: #e94f25;
      border: 0;
    }
  }
}
@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}
</style>
